<template>
	<div class="info">
		<div class="info-header">
			<div style="display: flex;">
				<el-image style="width: 6rem; height: 6rem;border-radius: 50%;" :src="url + getUserInfo.headImg"></el-image>
				<div class="fwb fz1 plr1">{{ getUserInfo.name }}</div>
				<div>
					<el-tag>{{ getUserInfo.username }}</el-tag>
				</div>
			</div>
			<div style="color: #146ac1;">
				<div style="cursor: pointer;">
					<!-- <i class="el-icon-edit"></i> -->
					<span style="margin-left: 0.3rem;" @click="editUser">编辑</span>
				</div>
			</div>
		</div>
		<ul style="list-style-type:none;margin-top: 4rem;">
			<li>
				<i class="el-icon-user-solid"></i>
				<span style="font-weight: bold; font-size: 1rem; padding: 0 0.5rem 0 0.3rem;">性别</span>
				<span>{{ getUserInfo.sex }}</span>
				<el-divider></el-divider>
			</li>
			<li>
				<i class="el-icon-phone"></i>
				<span style="font-weight: bold; font-size: 1rem; padding: 0 0.5rem 0 0.3rem;">电话</span>
				<span>{{ getUserInfo.mobile }}</span>
				<el-divider></el-divider>
			</li>
			<li>
				<i class="el-icon-s-comment"></i>
				<span style="font-weight: bold; font-size: 1rem; padding: 0 0.5rem 0 0.3rem;">邮箱</span>
				<span class="pull-right">{{ getUserInfo.email }}</span>
				<el-divider></el-divider>
			</li>
		</ul>

		<!-- 编辑 -->
		<el-dialog title="编辑" :visible.sync="dialogVisible" :before-close="handleClose" v-dialogDrag v-dialogDragWidth>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="头像" prop="image">
					<el-upload
						ref="upload"
						:class="{ uoloadSty: showBtnImg, disUoloadSty: noneBtnImg }"
						action
						accept="image/png,image/gif,image/jpg,image/jpeg"
						list-type="picture-card"
						:file-list="fileLists"
						:auto-upload="false"
						:before-upload="handleBeforeUpload"
						:on-change="handleImgChange"
						:on-remove="handleRemove"
					>
						<i class="el-icon-plus"></i>
					</el-upload>
					<el-dialog :visible.sync="dialogVisibleImg"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog>
				</el-form-item>
				<el-form-item label="电话" prop="mobile">
					<el-input style="width: 20rem;" maxlength="11" size="small" placeholder="请输入电话" v-model="ruleForm.mobile"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" prop="email"><el-input style="width: 20rem;" size="small" placeholder="请输入邮箱" v-model="ruleForm.email"></el-input></el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-radio-group v-model="ruleForm.sex">
						<el-radio label="男"></el-radio>
						<el-radio label="女"></el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button style="width: 5rem;" size="mini" type="primary" :loading="loading" @click="confirm('ruleForm')">
					<span v-if="!loading">确认</span>
					<span v-else>确认中...</span>
				</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { userInfo, userInfos, editUserInfo } from '@/api/user.js';
import { upload } from '@/api/drill.js';
import { getItem } from '@/utils/storage.js';
export default {
	name: 'personageInfo',
	data() {
		//业主电话
		const mobileData = (rule, value, callback) => {
			if (value == null) {
				callback(new Error('请输入手机号'));
			} else if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(value)) {
				callback(new Error('请正确的手机号格式'));
			} else {
				callback();
			}
		};
		//邮箱
		const emailData = (rule, value, callback) => {
			if (value == null) {
				callback(new Error('请输入邮箱'));
			} else if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(value)) {
				callback(new Error('请正确的邮箱格式'));
			} else {
				callback();
			}
		};
		//图片
		const imageRules = (rule, value, callback) => {
			if (this.ruleForm.headImg == null) {
				callback(new Error('请选择头像'));
			}
			callback();
		};
		return {
			ruleForm: {
				mobile: null,
				email: null,
				sex: null,
				headImg: null,
				token: null
			},
			loading: false,
			imageUrl: '',
			showBtnImg: true,
			noneBtnImg: false,
			fileLists: [],
			dialogImageUrl: '',
			rules: {
				mobile: [{ required: true, validator: mobileData, trigger: 'blur' }],
				email: [{ required: true, validator: emailData, trigger: 'blur' }],
				sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
				image: [{ required: true, validator: imageRules, trigger: 'change' }]
			},
			//用户信息
			getUserInfo: {},
			dialogVisible: false,
			dialogVisibleImg: false
		};
	},
	created() {
		this.getUserInfos();
	},
	methods: {
		getUserInfos() {
			let data = {
				token: getItem('token')
			};
			userInfo(data).then(res => {
				this.getUserInfo = res.data;
			});
		},
		editUser() {
			this.fileLists = [];
			this.dialogVisible = true;
			let data = {
				token: getItem('token')
			};
			userInfos(data).then(res => {
				if (res.code == 1001) {
					this.dialogVisible = true;
					this.ruleForm = {
						mobile: res.data.mobile,
						email: res.data.email,
						sex: res.data.sex,
						headImg: this.url + res.data.headImg
					};
					let loadImg = {
						name: 'loadImg',
						url: this.url + res.data.headImg
						// url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
					};
					this.fileLists.push(loadImg);
					this.noneBtnImg = true;
				}
			});
		},
		handleClose() {
			this.dialogVisible = false;
		},
		// 上传文件之前的钩子
		handleBeforeUpload(file) {
			if (!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
				this.$notify.warning({
					title: '警告',
					message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
				});
			}
			let size = file.size / 1024 / 1024 / 2;
			if (size > 2) {
				this.$notify.warning({
					title: '警告',
					message: '图片大小必须小于2M'
				});
			}
		},
		//选择文件变化
		handleImgChange(e, flies) {
			let formData = new FormData();
			formData.append('file', e.raw);
			upload(formData).then(res => {
				this.ruleForm.headImg = res.data;
			});
			this.noneBtnImg = flies.length >= 1;
			this.fileLists = flies;
		},
		// 文件列表移除文件时的钩子
		handleRemove(file, fileList) {
			this.ruleForm.headImg = null;
			this.noneBtnImg = fileList.length >= 1;
		},
		confirm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.ruleForm.token = getItem('token');
					this.loading = true;
					editUserInfo(this.ruleForm).then(res => {
						if (res.code == 1001) {
							this.msgSuccess(res.msg);
							this.dialogVisible = false;
							this.getUserInfos();
							this.loading = false;
						}
					});
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.info {
	width: 100%;
	height: 60rem;
	background-color: #ffffff;
	padding: 1rem;
	box-sizing: border-box;
	border: #e6e6e6 1px solid;
	border-radius: 8px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	.info-header {
		height: 5rem;
		line-height: 6rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
.el-divider--horizontal {
	margin: 0.7rem 0;
}
.el-tag {
	background-color: #00a0e9;
	color: #ffffff;
}
/deep/.el-dialog__header {
	background-color: #2f6bbb;
	.el-dialog__title {
		color: #ffffff;
	}
	.el-icon-close {
		color: #ffffff;
	}
}
/deep/.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
/deep/.disUoloadSty .el-upload--picture-card {
	display: none; /* 上传按钮隐藏 */
}
</style>
